<template>
  <div>
    <ul class="btnList">
      <li @click="operate('register')">
        <p>{{ $t("Registration") }}</p>
        <span>{{ $t("Registration") }}</span>
      </li>
      <li @click="operate('recharge')">
        <p>{{ $t("FastRecharge") }}</p>
        <span>{{ $t("FastRecharge") }}</span>
      </li>
      <li @click="operate('exchange')">
        <p>{{ $t("ChipExchange") }}</p>
        <span>{{ $t("PROMOTIONHALL") }}</span>
      </li>
      <li @click="operate('withdrawal')">
        <p>{{ $t("withdrawal") }}</p>
        <span>{{ $t("withdrawal") }}</span>
      </li>
    </ul>
    <div class="title">
      <h2>{{ $t("popular") }}</h2>
    </div>
    <div class="tips">
      <div>
        <el-divider />
      </div>
      <span>{{ $t("hotGames") }}</span>
      <div>
        <el-divider />
      </div>
    </div>
    <ul class="gameList" v-if="list.length > 0">
      <li v-for="(item, index) of list" :key="index" @click="start(item.id)">
        <img :src="item.icon" alt="" />
      </li>
    </ul>
    <p v-else class="noData">{{ $t("noData") }}</p>
    <div class="title">
      <h2>{{ $t("Exciting") }}</h2>
    </div>
    <div class="tips">
      <div>
        <el-divider />
      </div>
      <span>{{ $t("slotGames") }}</span>
      <div>
        <el-divider />
      </div>
    </div>
    <ul class="gameList1" v-if="list1.length > 0">
      <li v-for="(item, index) of list1" :key="index" @click="start(item.id)">
        <img :src="item.icon" alt="" />
      </li>
    </ul>
    <p v-else class="noData">{{ $t("noData") }}</p>
    <Login
      :loginFormVisible="loginFormVisible"
      @closeDialog="loginFormVisible = false"
      @register="$emit('toRegister')"
      :isShowToRegister="true"
    />
    <Loading v-if="listLoading" />
  </div>
</template>
<script>
import { httpHomeList, httpEnterGame } from "@/http/api";
import Login from "../pcComponents/login.vue";
import Loading from "@/components/loading.vue";
export default {
  name: "Main",
  components: {
    Login,
    Loading,
  },
  data() {
    return {
      listAjax: false,
      listLoading: false,
      list: [], //列表数据
      list1: [],
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        total_page: 0,
        nodata: false,
      },
      startAjax: false,
      loginFormVisible: false,
    };
  },

  created() {
    this.onLoadList();
  },
  methods: {
    onLoadList() {
      this.getHttpHomeList();
      this.getHttpSlotList();
    },
    // 游戏列表
    async getHttpHomeList() {
      let params = {
        page: 1,
        category_id: 4,
      };
      this.listLoading = true;
      let res = await httpHomeList(params);
      if (res.code == 0) {
        this.list = res.data.list || [];
      }
      this.listLoading = false;
    },
    async getHttpSlotList() {
      let params = {
        page: 1,
        category_id: 1,
      };
      let res = await httpHomeList(params);
      if (res.code == 0) {
        this.list1 = res.data.list || [];
      }
    },
    async start(id) {
      if (!localStorage.getItem("TOKEN")) return this.$router.push("/Register");
      if (this.startAjax) return;
      let params = {
        id,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        window.location.href = res.data.parameter.url;
      } else {
        this.$message.error(res.message);
      }
      this.startAjax = false;
    },
    operate(type) {
      this.$emit("operate", type);
    },
  },
};
</script>
<style lang="less" scoped>
.btnList {
  display: flex;
  justify-content: space-between;
  li {
    flex: 1;
    height: 90px;
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    p {
      color: #333;
      font-weight: 500;
      padding-left: 10px;
    }
    span {
      font-size: 0.75rem;
      color: #cecdce;
      margin-top: 4px;
      padding-left: 10px;
    }
    &:first-child {
      background: url("../../assets/img/pcImg/top-banner-1.png") no-repeat;
      background-size: 100% 100%;
    }
    &:nth-child(2) {
      background: url("../../assets/img/pcImg/top-banner-2.png") no-repeat;
      background-size: 100% 100%;
    }
    &:nth-child(3) {
      background: url("../../assets/img/pcImg/top-banner-3.png") no-repeat;
      background-size: 100% 100%;
    }
    &:last-child {
      background: url("../../assets/img/pcImg/top-banner-4.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  h2 {
    color: #645041;
    font-weight: 500;
  }
}
.tips {
  width: 40%;
  margin: auto;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #b7c2bf;
  }
  div {
    width: 50px;
  }
}
.gameList {
  display: grid;
  grid-template-columns: repeat(auto-fill, 22%);
  justify-content: space-between;
  gap: 10px;
  li {
    width: 100%;
    height: 150px;
    background: #fff;
    margin: 10px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
}
.gameList1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 16%);
  justify-content: space-between;
  li {
    width: 100%;
    background: #fff;
    margin: 10px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
}
</style>
